<template>
  <vxe-modal
    resize
    esc-closable
    width="55%"
    height="50%"
    showFooter
    v-model="formVisible"
    @hide="formClose"
    :loading="formLoading"
    destroy-on-close
  >
    <template slot="title">
      <span>字典分类表单</span>
    </template>
    <template>
      <el-scrollbar class="scrollbar-handle">
        <vxe-form
          ref="firstForm"
          title-width="100"
          title-align="right"
          :data="formEntity"
          :rules="rules"
          span="12"
        >
          <vxe-form-item
            title="分类名称"
            field="B_ItemName"
            :title-suffix="{ message: '分类名称不能重复！', icon: 'fa fa-exclamation-circle' }"
          >
            <el-input v-model="formEntity.B_ItemName" placeholder="请输入" clearable></el-input>
          </vxe-form-item>
          <vxe-form-item
            title="分类编码"
            field="B_ItemCode"
            :title-suffix="{ message: '分类编码不能重复！', icon: 'fa fa-exclamation-circle' }"
          >
            <el-input v-model="formEntity.B_ItemCode" placeholder="请输入" clearable></el-input>
          </vxe-form-item>
          <vxe-form-item title="所属上级">
            <rayd-select :options="headTreeList" v-model="formEntity.B_ParentId" tree-config></rayd-select>
          </vxe-form-item>
          <vxe-form-item title="排序码" span="10">
            <el-input-number :controls="false" :min="0" v-model="formEntity.B_SortCode"></el-input-number>
          </vxe-form-item>
          <vxe-form-item title="描述" field="B_Description" span="24">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4}"
              placeholder="请输入"
              clearable
              v-model="formEntity.B_Description"
            ></el-input>
          </vxe-form-item>
        </vxe-form>
      </el-scrollbar>
    </template>
    <template slot="footer">
      <el-button type="primary" v-form-validate="formSubmit">保存</el-button>
      <el-button @click="formVisible=false">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script> 
import { DataItem } from "@/api";
export default {
  name: "HeadForm",
  props: {},
  data() {
    return {
      //存放表单ref数组
      formArr: ["firstForm"],
      //表单可见
      formVisible: false,
      //表单加载中
      formLoading: false,
      //表单实体
      formEntity: {},
      //表单验证规则（规则键必须和表单键一致）
      rules: {
        B_ItemName: [
          {
            required: true,
            validator: ({ itemValue, property }) => {
              return new Promise((resolve, reject) => {
                if (this.util.validateNull(itemValue)) {
                  reject(new Error("不能为空！"));
                } else {
                  DataItem.ValidateHeadExist({
                    id: this.formEntity.B_ItemId,
                    field: property,
                    value: itemValue,
                  })
                    .then((res) => {
                      resolve();
                    })
                    .catch((err) => {
                      reject(new Error("分类名称已存在！"));
                    });
                }
              });
            },
          },
        ],
        B_ItemCode: [
          {
            required: true,
            validator: ({ itemValue, property }) => {
              return new Promise((resolve, reject) => {
                if (this.util.validateNull(itemValue)) {
                  reject(new Error("不能为空！"));
                } else {
                  DataItem.ValidateHeadExist({
                    id: this.formEntity.B_ItemId,
                    field: property,
                    value: itemValue,
                  })
                    .then((res) => {
                      resolve();
                    })
                    .catch((err) => {
                      reject(new Error("分类编号已存在！"));
                    });
                }
              });
            },
          },
        ],
      },
      /* 实体数据 */
      headTreeList: [], //字典分类树型数据
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {},
    //表单开启
    formOpen(row) {
      //打开表单
      this.formVisible = this.formLoading = true;
      this.formEntity = row;
      //获取字典分类树形数据
      DataItem.GetHeadTreeList(row ? row.B_ItemId : "").then((res) => {
        this.headTreeList = res;
        this.formLoading = false;
      });
    },
    //表单提交
    formSubmit() {
          //验证通过
          DataItem.SaveHead(this.formEntity).then((res) => {
            this.formVisible = false; //关闭弹窗
            this.$emit("refresh"); //刷新
            //刷新缓存数据
            DataItem.GetTreeList("").then((res) => {
              this.$store.commit("SET_DATAITEMLIST", res);
            })
          });
    },
    //表单关闭
    formClose() {
      //清除表单验证
      this.util.formClearValid(this.formArr);
      //数据归位
      Object.assign(this.$data, this.$options.data.call(this))
    },
  },
};
</script>

<style lang="less" scoped>
</style>